<!DOCTYPE html>
<!--
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
-->
<html>
  <head>
    <meta charset="utf-8" />
    <title>API Usage &mdash; CKEditor Sample</title>
    <script src="../../ckeditor.js"></script>
    <link href="sample.css" rel="stylesheet" />
    <script>
      // The instanceReady event is fired, when an instance of CKEditor has finished
      // its initialization.
      CKEDITOR.on('instanceReady', function (ev) {
        // Show the editor name and description in the browser status bar.
        document.getElementById('eMessage').innerHTML =
          'Instance <code>' + ev.editor.name + '<\/code> loaded.';

        // Show this sample buttons.
        document.getElementById('eButtons').style.display = 'block';
      });

      function InsertHTML() {
        // Get the editor instance that we want to interact with.
        var editor = CKEDITOR.instances.editor1;
        var value = document.getElementById('htmlArea').value;

        // Check the active editing mode.
        if (editor.mode == 'wysiwyg') {
          // Insert HTML code.
          // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-insertHtml
          editor.insertHtml(value);
        } else alert('You must be in WYSIWYG mode!');
      }

      function InsertText() {
        // Get the editor instance that we want to interact with.
        var editor = CKEDITOR.instances.editor1;
        var value = document.getElementById('txtArea').value;

        // Check the active editing mode.
        if (editor.mode == 'wysiwyg') {
          // Insert as plain text.
          // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-insertText
          editor.insertText(value);
        } else alert('You must be in WYSIWYG mode!');
      }

      function SetContents() {
        // Get the editor instance that we want to interact with.
        var editor = CKEDITOR.instances.editor1;
        var value = document.getElementById('htmlArea').value;

        // Set editor contents (replace current contents).
        // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-setData
        editor.setData(value);
      }

      function GetContents() {
        // Get the editor instance that you want to interact with.
        var editor = CKEDITOR.instances.editor1;

        // Get editor contents
        // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-getData
        alert(editor.getData());
      }

      function ExecuteCommand(commandName) {
        // Get the editor instance that we want to interact with.
        var editor = CKEDITOR.instances.editor1;

        // Check the active editing mode.
        if (editor.mode == 'wysiwyg') {
          // Execute the command.
          // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-execCommand
          editor.execCommand(commandName);
        } else alert('You must be in WYSIWYG mode!');
      }

      function CheckDirty() {
        // Get the editor instance that we want to interact with.
        var editor = CKEDITOR.instances.editor1;
        // Checks whether the current editor contents present changes when compared
        // to the contents loaded into the editor at startup
        // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-checkDirty
        alert(editor.checkDirty());
      }

      function ResetDirty() {
        // Get the editor instance that we want to interact with.
        var editor = CKEDITOR.instances.editor1;
        // Resets the "dirty state" of the editor (see CheckDirty())
        // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-resetDirty
        editor.resetDirty();
        alert('The "IsDirty" status has been reset');
      }

      function Focus() {
        CKEDITOR.instances.editor1.focus();
      }

      function onFocus() {
        document.getElementById('eMessage').innerHTML =
          '<b>' + this.name + ' is focused </b>';
      }

      function onBlur() {
        document.getElementById('eMessage').innerHTML =
          this.name + ' lost focus';
      }
    </script>
  </head>
  <body>
    <h1 class="samples">
      <a href="index.html">CKEditor Samples</a> &raquo; Using CKEditor
      JavaScript API
    </h1>
    <div class="warning deprecated">
      This sample is not maintained anymore. Check out its
      <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/api.html"
        >brand new version in CKEditor Examples</a
      >.
    </div>
    <div class="description">
      <p>
        This sample shows how to use the
        <a
          class="samples"
          href="https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html"
          >CKEditor JavaScript API</a
        >
        to interact with the editor at runtime.
      </p>
      <p>
        For details on how to create this setup check the source code of this
        sample page.
      </p>
    </div>

    <!-- This <div> holds alert messages to be display in the sample page. -->
    <div id="alerts">
      <noscript>
        <p>
          <strong>CKEditor requires JavaScript to run</strong>. In a browser
          with no JavaScript support, like yours, you should still see the
          contents (HTML data) and you should be able to edit it normally,
          without a rich editor interface.
        </p>
      </noscript>
    </div>
    <form action="../../../samples/sample_posteddata.php" method="post">
      <textarea cols="100" id="editor1" name="editor1" rows="10">
&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="https://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea
      >

      <script>
        // Replace the <textarea id="editor1"> with an CKEditor instance.
        CKEDITOR.replace('editor1', {
          on: {
            focus: onFocus,
            blur: onBlur,

            // Check for availability of corresponding plugins.
            pluginsLoaded: function (evt) {
              var doc = CKEDITOR.document,
                ed = evt.editor;
              if (!ed.getCommand('bold')) doc.getById('exec-bold').hide();
              if (!ed.getCommand('link')) doc.getById('exec-link').hide();
            },
          },
        });
      </script>

      <p id="eMessage"></p>

      <div id="eButtons" style="display: none;">
        <input
          id="exec-bold"
          onclick="ExecuteCommand('bold');"
          type="button"
          value='Execute "bold" Command'
        />
        <input
          id="exec-link"
          onclick="ExecuteCommand('link');"
          type="button"
          value='Execute "link" Command'
        />
        <input onclick="Focus();" type="button" value="Focus" />
        <br /><br />
        <input onclick="InsertHTML();" type="button" value="Insert HTML" />
        <input
          onclick="SetContents();"
          type="button"
          value="Set Editor Contents"
        />
        <input
          onclick="GetContents();"
          type="button"
          value="Get Editor Contents (HTML)"
        />
        <br />
        <textarea cols="100" id="htmlArea" rows="3">
&lt;h2&gt;Test&lt;/h2&gt;&lt;p&gt;This is some &lt;a href="/Test1.html"&gt;sample&lt;/a&gt; HTML code.&lt;/p&gt;</textarea
        >
        <br />
        <br />
        <input onclick="InsertText();" type="button" value="Insert Text" />
        <br />
        <textarea cols="100" id="txtArea" rows="3">
   First line with some leading whitespaces.

Second line of text preceded by two line breaks.</textarea
        >
        <br />
        <br />
        <input onclick="CheckDirty();" type="button" value="checkDirty()" />
        <input onclick="ResetDirty();" type="button" value="resetDirty()" />
      </div>
    </form>
    <div id="footer">
      <hr />
      <p>
        CKEditor - The text editor for the Internet -
        <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>
      </p>
      <p id="copy">
        Copyright &copy; 2003-2019,
        <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico
        Knabben. All rights reserved.
      </p>
    </div>
  </body>
</html>
